Angular Material এর MatSnackbar কম্পোনেন্টটি ব্যবহারকারীদের ইন্টারঅ্যাকশন বা তথ্য প্রদর্শনের জন্য একটি স্ন্যাকবার বার (Snackbar bar) প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত একটি ছোট বার যা অ্যাপ্লিকেশনের নিচের অংশে প্রদর্শিত হয় এবং একটি নির্দিষ্ট সময়ের জন্য দৃশ্যমান থাকে।

Snackbar এর দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য রয়েছে:

1. স্থায়ীত্ব (Duration): কত সময়ের জন্য snackbar বারটি প্রদর্শিত থাকবে।
2. পজিশন (Position): snackbar বারটির অবস্থান কেমন হবে (যেমন, স্ক্রীনের উপর, নিচে, মাঝখানে, ডান, বামে ইত্যাদি)।

Angular Material এর MatSnackbar কম্পোনেন্টের মাধ্যমে আপনি এই দুটি বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।

১. MatSnackbar কনফিগারেশন সেটআপ

প্রথমে আপনাকে MatSnackBar ব্যবহার করার জন্য এটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।

app.module.ts ফাইলে MatSnackBarModule ইমপোর্ট করা

import { MatSnackBarModule } from '@angular/material/snack-bar';

@NgModule({
  imports: [
    MatSnackBarModule
  ]
})
export class AppModule { }

এখন আপনি MatSnackBar কম্পোনেন্ট ব্যবহার করতে পারবেন।

২. Snackbar স্থায়ীত্ব কাস্টমাইজ করা

Snackbar এর স্থায়ীত্ব কাস্টমাইজ করতে হলে, MatSnackBar এর open() মেথডের মধ্যে duration প্যারামিটারটি নির্ধারণ করতে হবে। duration প্যারামিটারটির মান মিলিসেকেন্ডে প্রদান করা হয় (যেমন, ২০০০ মিলিসেকেন্ড = ২ সেকেন্ড)।

উদাহরণ:

import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private snackBar: MatSnackBar) {}

  openSnackbar() {
    this.snackBar.open('This is a snackbar message!', 'Close', {
      duration: 3000  // Snackbar 3 সেকেন্ডের জন্য দৃশ্যমান থাকবে
    });
  }
}

এখানে:

• duration: এটি নির্ধারণ করে যে snackbar কত সময়ের জন্য প্রদর্শিত হবে। এই উদাহরণে, snackbar বারটি ৩ সেকেন্ড (৩০০০ মিলিসেকেন্ড) দেখানো হবে।

৩. Snackbar পজিশন কাস্টমাইজ করা

Snackbar এর পজিশন পরিবর্তন করতে, MatSnackBar এর open() মেথডে horizontalPosition এবং verticalPosition প্যারামিটার ব্যবহার করা হয়। এই প্যারামিটারগুলি snackbar বারটির অনুভূমিক এবং উল্লম্ব অবস্থান কাস্টমাইজ করতে সহায়ক।

পজিশন কাস্টমাইজ করার জন্য বিকল্প প্যারামিটারগুলি:

• horizontalPosition: এটি snackbar এর অনুভূমিক অবস্থান নির্ধারণ করে (বাম বা ডান)।
  • start: বাম পাশে
  • center: স্ক্রীনের মাঝখানে
  • end: ডান পাশে
• verticalPosition: এটি snackbar এর উল্লম্ব অবস্থান নির্ধারণ করে (উপর বা নিচে)।
  • top: স্ক্রীনের উপরের দিকে
  • bottom: স্ক্রীনের নিচে

উদাহরণ:

import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private snackBar: MatSnackBar) {}

  openSnackbar() {
    this.snackBar.open('Snackbar with custom position!', 'Close', {
      duration: 3000,
      horizontalPosition: 'center',  // স্ক্রীনের মাঝখানে
      verticalPosition: 'top'        // স্ক্রীনের উপরের দিকে
    });
  }
}

এখানে:

• horizontalPosition: 'center' সেট করার মাধ্যমে snackbar স্ক্রীনের মাঝখানে থাকবে।
• verticalPosition: 'top' সেট করার মাধ্যমে snackbar স্ক্রীনের উপরের দিকে থাকবে।

৪. Snackbar কাস্টম স্টাইলিং এবং অ্যাকশন বাটন

Snackbar এর মধ্যে আপনি কাস্টম স্টাইলিংও যোগ করতে পারেন। এছাড়া, snackbar বারটির সাথে একটি অ্যাকশন বাটন (যেমন Close) যোগ করতে পারবেন। এই বাটনে ক্লিক করলে snackbar বন্ধ হয়ে যাবে।

উদাহরণ:

import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private snackBar: MatSnackBar) {}

  openSnackbar() {
    this.snackBar.open('Snackbar with action button', 'Undo', {
      duration: 3000,
      horizontalPosition: 'end',
      verticalPosition: 'bottom'
    }).onAction().subscribe(() => {
      console.log('Undo action clicked!');
    });
  }
}

এখানে:

• onAction(): এটি একটি ইভেন্ট হ্যান্ডলার, যা 'Undo' বাটনে ক্লিক করা হলে ট্রিগার হবে।
• 'Undo': snackbar বারটির সাথে একটি অ্যাকশন বাটন যোগ করা হয়েছে, যা ব্যবহারকারীর কাছে প্রাপ্ত হবে।

৫. স্টাইলিং কাস্টমাইজেশন

Snackbar এর স্টাইল কাস্টমাইজ করতে আপনি CSS ব্যবহার করতে পারেন। যেমন, আপনি snackbar এর ব্যাকগ্রাউন্ড রং বা ফন্ট স্টাইল পরিবর্তন করতে পারেন।

.mat-snack-bar-container {
  background-color: #4caf50;  /* সবুজ ব্যাকগ্রাউন্ড */
  color: white;               /* সাদা টেক্সট */
}

এটি mat-snack-bar-container ক্লাসকে টার্গেট করে, যা snackbar এর কন্টেইনারের স্টাইল নির্ধারণ করে।

Angular Material Snackbar কম্পোনেন্টের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনে ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব বার তৈরি করতে পারেন। duration প্যারামিটার ব্যবহার করে snackbar এর স্থায়ীত্ব কাস্টমাইজ করা যায় এবং horizontalPosition এবং verticalPosition প্যারামিটার ব্যবহার করে snackbar এর পজিশন নির্ধারণ করা যায়। এই দুটি বৈশিষ্ট্য আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও কার্যকর এবং উন্নত করতে সাহায্য করবে।